<template>
  <view class="wrapper">
    <div class="title" v-if="title">
      <div class="active">
        <image
          class="icon"
          :src="'https://mini.jiaw.com/img/8515420211206.jpg'"
        ></image>
        <span class="active-name">热门活动</span>
      </div>
      <div class="more" @click="toActive">
        <image
          class="icon"
          :src="'https://mini.jiaw.com/img/5701420211206.jpg'"
        ></image>
      </div>
    </div>
    <view
      class="content"
      v-for="item in activity"
      :key="item.id"
      @click="toActiveDetail(item.id)"
    >
      <image class="image" :src="item.coverUrl" mode="aspectFill"></image>
      <text class="text">{{ item.activityName }}</text>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    activity: {
      type: Array
    },
    title: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    toActive() {
      uni.navigateTo({
        url: '/pages/package/activity/index'
      })
    },
    toActiveDetail(id) {
      uni.navigateTo({
        url: `/components/active/active-detail?id=${id}`
      })
    }
  }
}
</script>

<style lang="less" scoped>
.wrapper {
  padding: 0 40rpx 40rpx;
  .title {
    display: flex;
    justify-content: space-between;
    margin-top: 40rpx;
    .active {
      .icon {
        width: 25rpx;
        height: 25rpx;
        margin: 0 10rpx;
      }
      .active-name {
        font-size: 32rpx;
      }
    }

    .more {
      .icon {
        width: 80rpx;
        height: 28rpx;
      }
    }
  }
  .content {
    position: relative;
    margin-top: 20rpx;
    .image {
      height: 400rpx;
      display: block;
      border-top-left-radius: 10rpx;
      border-top-right-radius: 10rpx;
    }
    .text {
      bottom: 0;
      left: 0;
      color: #fff;
      background: rgba(0, 0, 0, 0.541);
      width: 100%;
      position: absolute;
      height: 80rpx;
      line-height: 80rpx;
      text-indent: 40rpx;
      font-size: 32rpx;
    }
  }
}
</style>
